<template>
  <div class="admin-wrapper">
    <div class="admin-wrapper_nav">
      <div class="logo">
        <h4>EBlog</h4>
      </div>
      <Menu v-model="currentMenu">
        <MenuItem
          v-for="item in menuList"
          :key="item.id"
          :icon="item.icon"
          :name="item.name"
          :to="item.to"
        >
          {{ item.label }}
        </MenuItem>
      </Menu>
      <div class="publish">
        <img src="../../assets/styles/imgs/publish.png" alt="" />
        <p>奋笔疾书</p>
        <button @click.prevent="createPost">写文章</button>
      </div>
    </div>
    <div class="admin-wrapper_content">
      <router-view />
    </div>
    <div class="admin-wrapper_personal">
      <div class="avator">
        <div class="avator-left">
          <img src="https://s2.ax1x.com/2020/03/05/3oxtkF.th.png" alt="" />
          <div class="name">Lament</div>
        </div>
        <div class="avator-right">
          <div class="setting">
            <i class="iconfont icon-zhankai"></i>
          </div>
        </div>
      </div>
      <div class="overview-info">
        <div class="overview-info_items">
          <p class="title">总篇数</p>
          <p class="number">1231</p>
        </div>
        <div class="overview-info_items">
          <p class="title">总浏览量</p>
          <p class="number">1231</p>
        </div>
        <div class="overview-info_items">
          <p class="title">总评论数</p>
          <p class="number">1231</p>
        </div>
        <div class="overview-info_items">
          <p class="title">总字数</p>
          <p class="number">1231</p>
        </div>
      </div>
      <div class="date-calendar">
        <Calendar @dateChange="dateChange" />
      </div>
      <div class="post-list">
        <template v-if="postList.length">
          <div class="post-list_items" v-for="item in postList" :key="item.id">
            <div class="left-description">
              <p>{{ item.title }}</p>
              <span>{{ item.description }}</span>
            </div>
            <div class="right-options">
              <i class="iconfont icon-edit"></i>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="no-post">
            <img src="../../assets/styles/imgs/no-data.png" alt="" />
            <p>
              今天还没有开始写文章哟！
              <i class="iconfont icon-gangbi" title="创建文章" @click="createPost"></i>
            </p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../../api/blog'
export default {
  data() {
    return {
      currentMenu: 'home',
      time: '',
      menuList: [
        {
          id: 'home',
          name: 'home',
          icon: 'home',
          to: '/admin/home',
          label: '首页'
        },
        {
          id: 'content',
          name: 'content',
          icon: 'manager',
          to: '/admin/content',
          label: '内容管理'
        },
        {
          id: 'data',
          name: 'data',
          icon: 'data',
          to: '/admin/data',
          label: '数据管理'
        },
        {
          id: 'nav',
          name: 'nav',
          icon: 'nav',
          to: '/admin/nav',
          label: '导航管理'
        },
        {
          id: 'setting',
          name: 'setting',
          icon: 'setting-filling',
          to: '/admin/setting',
          label: '个人设置'
        }
      ],
      postList: []
    }
  },
  methods: {
    async getPostList() {
      const params = {
        time: this.time
      }
      try {
        const res = await api.getPostList(params)
        if (res.code === 200) {
          this.postList = res.data
        }
      } catch (err) {
        console.log(err)
      }
    },
    dateChange(time) {
      this.time = time
      this.getPostList()
    },
    createPost() {
      this.$router.push('/create')
    }
  },
  created() {
    this.currentMenu = this.$route.name
  },
  mounted() {
    this.getPostList()
  }
}
</script>
